<template>
  <div >
    <el-container>
      <el-header><h1>通义千问</h1></el-header>
      <el-main class="common-layout">
        <el-scrollbar height="600px">
          <el-card :class="{ 'card': true, 'cardFlexEnd': item.name == 'user', 'sysDialog': item.name !== 'user' }"
            v-for="(item, i) in list" :key="i">
            <el-row>
              <el-col :span="2">
                <div class="miIcon" v-if="item.name == 'user'">
                  U
                </div>
                <div class="miIcon ai" v-if="item.name !== 'user'">
                  AI
                </div>
              </el-col>
              <el-col :span="22">
                <div v-if="img && item.name !== 'user'">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src = "item.content"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :initial-index="0"
                    :preview-src-list="[item.content]"
                    fit="cover"
                  />
                </div>
                <div v-else="img">
                  <div v-if="item.content"
                    :class="{ 'context': true, 'commonDialog': item.name == 'user' }" v-html="mdIt(item.content)">
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-scrollbar>
      </el-main>
      <el-footer>
        <el-row>
          <el-col :span="19"><el-input v-model="userMsg"></el-input></el-col>
          <el-col :span="3"><el-button @click="sendMesage(userMsg)">发送消息</el-button></el-col>
          <el-col :span="2"><el-switch v-model="img" inline-prompt active-text="是" inactive-text="否" /></el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
    

    
    
    
    
</template>
   
<script>
import { onBeforeUnmount, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getMessage,getImg } from "../../api/index";
import {marked} from 'marked';
import hljs from 'highlight.js';
import "highlight.js/styles/monokai-sublime.css";

export default {
    name: "ai",
    setup() {
      const eventSource = new EventSource('http://127.0.0.1:8096/test/sse/1');
      eventSource.onmessage = (event)=>{
        console.log(event.data);
        message.content = event.data;
        message.name = "ai";
        list.pop();
        list.push(JSON.parse(JSON.stringify(message)));
      };

      const list = reactive([]);
   
      let message = reactive(
        {
          name: "user",
          content: ""
        }
      );
      let userMsg = ref("")
      let msg = reactive({
        message: ""
      });
      let name = ref("");
      const img = ref(false);
      const rendererMD = new marked.Renderer();
      const mdIt = (text) =>{
        marked.setOptions({
          renderer: rendererMD,
          highlight: (codeToHighlight, lang) => {
            const validLanguage = hljs.getLanguage(lang) ? lang : 'plaintext';
            return !!(language && hljs.getLanguage(validLanguage))?
            highlightBlock(hljs.highlight(validLanguage, codeToHighlight, true).value):
            highlightBlock(hljs.highlightAuto(codeToHighlight).value);
          },
          pedantic: false,
          gfm: true,
          tables: true,
          breaks: false,
          sanitize: false,
          smartLists: true,
          smartypants: false,
          xhtml: false,
        });
        return marked(text);
      };

      const sendMesage = (m) => {
        userMsg.value = "";
        message.content = m;
        message.name = 'user';
        //解决message对象只有一个，push修改所有message对象的问题
        list.push(JSON.parse(JSON.stringify(message)));
        console.log(list);
        msg.message = m;
        
        if(img.value){
          getImg(msg).then((res)=>{
            message.content = res.data;
            message.name = "ai";
            list.push(JSON.parse(JSON.stringify(message)));
          })
        }else{
          getMessage(msg).then((res)=>{
            message.content = " ";
            message.name = "ai";
            list.push(JSON.parse(JSON.stringify(message)));
          })
        }
      };
      return {
        name,
        userMsg,
        list,
        msg,
        message,
        sendMesage,
        mdIt,
        rendererMD,
        img,
        eventSource
      };
    },
  };
   
  </script>
   
  <style scoped>
  
  .sysDialog {
    background: #fff;
    color: #41434F;
    border-radius: 8px;
    box-shadow: 0px 5px 10px 0px rgba(57, 59, 60, 0.06) !important;
    cursor: pointer;
    transition: 0.3s;

    &:hover {
        box-shadow: 0px 0px 20px 0px rgba(57, 59, 60, 0.03) !important;

    }
}

.commonDialog {
    background: rgba(0, 0, 0, 0);
    color: #41434F !important;
    cursor: pointer;
    transition: 0.3s;
}
.card {
    position: relative;
    /* display: flex; */
    margin-bottom: 15px;
    transform: 0.3s;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /* border: 1px solid black; */
    /* &:hover {
        transition: all 0.3s ease;
        transform: scale(1.005);
    } */

    img {
        padding: 7px;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        border-radius: 8px;
        margin: 5px 10px;
    }

    .context {
        box-sizing: border-box;
        line-height: 25px;
        max-width: calc(100% - 70px);
        padding: 15px 0px 15px 0px;
        font-size: 14px;
    }
}
.miIcon {
    min-width: 30px;
    margin: 12px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #414141;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 13px;
    color: #fff;
}

.ai {
    background-image: linear-gradient(to right, #778dfc, #3D73E9) !important;
}

.common-layout {
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-bottom: 20px;
  margin-top: 20px;
}


  </style>